<template>
  <div>
    <Headers></Headers>
    <div class="all">
      <div class="el-header">
        <ul>
          <router-link to="/homepage">
            <li @click="jump(1)" :class="{active:active==1}">首页</li>
          </router-link>
          <router-link to="/amazing">
            <li @click="jump(2)" :class="{active:active==2}">精选</li>
          </router-link>
          <router-link to="/3">
            <li @click="jump(3)" :class="{active:active==3}">分类</li>
          </router-link>
          <router-link to="/4/all">
            <li @click="jump(4)" :class="{active:active==4}">排行榜</li>
          </router-link>
          <router-link to="/kehuduan">
            <li @click="jump(5)" :class="{active:active==5}">客户端</li>
          </router-link>
        </ul>
      </div>
      <router-view></router-view>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Headers from "@/components/wl/headers.vue";
import Footer from "@/components/wl/footer.vue";
export default {
  components: {
    Headers,
    Footer
  },
  data() {
    return {
      active: ""
    };
  },

  methods: {
    jump(id) {
      this.active = id;
    }
  }
};
</script>
<style scoped>
.all {
  width: 100% !important;
}
.el-header {
  height: 40px;
  margin-bottom: 30px;
  background: rgb(62, 61, 67);
  color: #333;
  text-align: center;
  line-height: 40px;
  width: 100%;
  padding: 0;
}
ul {
  width: 1200px;
  margin: 0 auto;
}
li {
  float: left;
  width: 140px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  margin: 0 50px;
}
li:hover {
  background: rgb(49, 48, 53);
  color: rgb(255, 208, 75);
}
.active {
  background: rgb(49, 48, 53);
  color: rgb(255, 208, 75);
}
</style>